<!--
	组件说明：
		icon(按钮图标)、content(提示消息)必传
        placement(提示位置)、type(按钮种类)、size(按钮大小)有默认值，可以进行修改

    使用:
        <TipButton :tipMessage="tipMessage" :icon="icon" @click="clickEvent"></TipButton>
    提示语模板：
        修改：修改按钮
        删除：删除按钮
-->

<template>
    <el-tooltip class="item" effect="dark" :content="tipMessage" :placement="tipPlace">
      <el-button :icon="icon" :type="type" :size="size" @click="clickButton"></el-button>
    </el-tooltip>
</template>

<script>
export default {
    name: 'TipButton',

    props: {

        // 提示消息
        tipMessage: {
          type: String,
          default: '操作按钮'  
        },

        // 提示位置
        tipPlace:  {
          type: String,
          default: 'top-start'  
        },

        // 按钮图标
        icon: String,

        // 按钮种类
        type: {
          type: String,
          default: 'primary'  
        },

        // 按钮大小
        size: {
            type: String,
            default: 'small'
        },
    },
    methods: {
        clickButton() {
            this.$emit('click')
        }
    }
}
</script>

<style scoped>
.item {
      margin: 4px;
    }
</style>